<script lang="ts" setup>
import { categorylist, categorybrandlist } from '../../api/kind'
import { onMounted, ref } from 'vue'

const categoryList = ref([])

const categoryBrandList = ref([])
onMounted(() => {
    // 获取所有分类
    categorylist().then(res => {
        // console.log(res.data.data);
        categoryList.value = res.data.data

        // 根据分类获取品牌
        categorybrandlist({
            category: res.data.data[0]
        }).then(res => {
            // console.log(res.data.data);
            categoryBrandList.value = res.data.data
        })
    })
})
</script>
<template>
    <div class="box">
        <header class="header">分类</header>
        <div class="content">
            <div class="left">
                <van-sidebar>
                    <van-sidebar-item v-for="item in categoryList" :key="item" :title="item" />
                </van-sidebar>
            </div>
            <div class="right">
                <van-tabs>
                    <van-tab v-for="item in categoryBrandList" :key="item.brand" :title="item.brand" :name="item.brand">内容
                        1</van-tab>

                </van-tabs>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.content {
    display: flex;
    overflow: hidden;

    .left {
        width: 24%;
        overflow: auto;
    }

    .right {
        width: 76%;
    }
}
</style>